<template>
  <div>
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学号">
            <el-input v-model="formInline.user" placeholder="学号"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-select v-model="formInline.region" placeholder="专业">
              <el-option value=""></el-option>
              <el-option
                v-for="(item, index) in classed"
                :key="index"
                :value="item"
              >
                {{ item }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addStudent">添加</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 1080px">
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <router-link
                :to="{
                  path: '/update_info',
                  query: { id: scope.row.id },
                }"
                >{{ scope.row.student_name }}</router-link
              >
            </template>
          </el-table-column>
          <el-table-column label="学号" width="300">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.student_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="专业" width="300">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.student_class
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
                修改密码
              </el-button>
              <el-button size="mini" @click="deleStudent(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 修改密码弹框 -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="45%">
      <!-- 弹框内容 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="old" label="旧密码">
          <el-input disabled v-model="form.old"></el-input>
        </el-form-item>
        <el-form-item prop="new" label="新密码">
          <el-input v-model="form.new"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatatrue()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增学生弹框 -->
    <el-dialog
      title="新增学生"
      :visible.sync="dialogVisible_student"
      width="45%"
    >
      <!-- 弹框内容 -->
      <el-form
        ref="form_addstudent"
        :model="form_addstudent"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item prop="name" label="姓名">
          <el-input v-model="form_addstudent.name"></el-input>
        </el-form-item>
        <el-form-item prop="num" label="学号">
          <el-input v-model="form_addstudent.num"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="region">
          <el-select v-model="form_addstudent.region" placeholder="专业">
            <el-option
              v-for="(item, index) in classed"
              :key="index"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_student = false">取 消</el-button>
        <el-button type="primary" @click="addtrue()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页区域 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryinfo.limit"
      :current-page="queryinfo.current"
      @current-change="currentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    >
    </el-pagination>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
export default {
  created() {
    this.getstudent();
  },
  data() {
    return {
      total: null,
      // 传递页码的数据
      queryinfo: {
        limit: 5,
        current: 1,
      },
      // 修改密码
      form: {
        old: "",
        new: "",
      },
      // 新增学生数据
      form_addstudent: {},
      // 表格数据
      tableData: [],
      //搜索栏
      formInline: {},
      // 学院管理的学生的专业搜索
      cname_class: [],
      classed: [],
      msg: [],
      college: "",
      dialogVisible: false,
      dialogVisible_student: false,
      rules: {
        new: [
          { required: true, message: "必填哦", trigger: "blur" },
          { min: 6, max: 12, message: "密码6-12位", trigger: "blur" },
        ],
        name: { required: true, message: "必填", trigger: "blur" },
        num: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 12, max: 12, message: "学号为12位的哟", trigger: "blur" },
        ],
        region: { required: true, message: "必填", trigger: "blur" },
      },
    };
  },
  computed: {
    ...mapState(["collegeFilter", "collegeName"]),
  },
  methods: {
    ...mapMutations(["filte"]),
    // 查询
    onSubmit() {
      this.getstudent();
    },
    // 添加学生
    addStudent() {
      this.dialogVisible_student = true;
    },
    // 删除学生
    deleStudent(row) {
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/dele_studentinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            this.getstudent();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 获取所有学生信息
    getstudent() {
      const info = { ...this.queryinfo, ...this.formInline };
      this.$http
        .get("http://127.0.0.1:8080/minAdmin/get_allstudent", {
          params: info,
        })
        .then((res) => {
          if (res.data.status == 0) {
            this.college = res.data.data.datalist[0].student_college;
            this.filte(this.college);
            this.classed = this.collegeFilter[0].collegeClass;
            // this.college = res.data.data.datalist[0].student_college;
            // this.cname_class = this.collegeName.filter((val) => {
            //   return val.college == this.college;
            // });
            // this.classed = this.cname_class[0].collegeClass;
            this.tableData = res.data.data.datalist;
            this.total = res.data.data.total;
          } else {
            this.tableData = [];
            // this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 修改按钮
    handleEdit(index, row) {
      this.dialogVisible = true;
      // console.log(index, row);
      this.$http
        .post(
          "http://127.0.0.1:8080/minAdmin/get_stdpwd",
          this.$qs.stringify(row)
        )
        .then((res) => {
          // console.log(res);
          this.form.old = res.data.data[0].password;
        });
    },

    // 确认修改
    updatatrue() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/minAdmin/update_stdpwd",
            this.$qs.stringify(this.form)
          )
          .then((res) => {
            this.dialogVisible = false;
            this.$message.success("修改成功");
            this.form.new = "";
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },

    // 确认添加
    addtrue() {
      console.log(this.form_addstudent);
      this.$refs.form_addstudent.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/minAdmin/addstudent",
            this.$qs.stringify(this.form_addstudent)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.getstudent();
              this.$message.success(res.data.message);
              this.form_addstudent = {};
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    // 点击页码跳转
    currentChange(val) {
      this.queryinfo.current = val;
      this.getstudent();
    },
    // 上一页跳转
    prevClick(val) {
      this.queryinfo.current = val;
      this.getstudent();
    },
    // 下一页跳转
    nextClick(val) {
      this.queryinfo.current = val;
      this.getstudent();
    },
  },
};
</script>
<style lang="less" scoped>
.el-input {
  width: 500px;
}
.el-pagination {
  position: fixed;
  left: 50%;
  top: 70%;
  transform: translate(-50%, 0);
}
</style>
